Largest Contentful Paint(LCP)

viewport内のLargest Contentの初期読み込みにかかる時間

「一番大きいコンテンツがuserにとって重要なものであろう」ということが前提にある

評価

https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/ZZU8Z7TMKXmzZT2mCjJU.svg https://web.dev/vitals/

スコアの値は小さいほど良い

viewport内のLargest Contentとは ref

first viewでのviewport内のみが対象

もしLargest Contenstの一部がviewportからはみ出ていたとしても、viewport内の部分のみが対象になる

CSSによるmargin, padding, borderは考慮されない

LCPで考慮される要素は以下のみ

ポスター画像を使用した<video>

url()を介してloadされた背景画像を持つ要素

テキストノードまたは他のインラインレベルのテキスト要素の子を含むblock-level element

よくわからんmrsekut.icon

逆に言えば、これらの要素を一切使わずにサイトを作れば100%クリアするってこと？

計測する

これに関してはLighthouseの指摘であまり親切に教えてくれない

まずここで良いのか悪いのか確認しておく

https://gyazo.com/2acb27b81132a6f1bb7bcdd09fe376be

これはYouTubeの例、左下がLCPの指摘。悪い

速く出るように頑張る

Search Consoleで確認する

https://gyazo.com/1b875f67bb43d3d6826b7a074b216096

ここから「レポートを開く」とかでみると、LCPの問題がある場合、いろいろ表示されるので、そこから詳細が見れる

2021では、First Contentful Paint(FCP)も評価の対象になるらしい